From: David Härdeman <david@hardeman.nu>
Date: Wed, 22 Oct 2025 21:22:14 +0000 (+0200)
Subject: luci-base: add ability to hide section titles
X-Git-Url: http://git.openwrt.org/%22https:/collectd.org//%22/%22https:/collectd.org/%22?a=commitdiff_plain;h=545de2a4b5b9881104bb5b3bd82a1f1ccf6b6b8a;p=project%2Fluci.git

luci-base: add ability to hide section titles

The rationale here is that tabbed CBIMaps were introduced in commit
082fd9ff10b.

With tabbed maps, code could typically look like this:

	m = new form.Map('foobar', _('FooBar'));
	m.tabbed = true;
	s = m.section(form.TypedSection, 'foo', _('foo Settings'));

The problem is that the title of "s" will be used as the name of the tab
rendered in "m", but also rendered as an <h3> right below the tab. IOW,
the same information will be presented twice, which looks weird.

Doing this instead...

	m = new form.Map('foobar', _('FooBar'));
	m.tabbed = true;
	s = m.section(form.TypedSection, 'foo');

...means that the superfluous <h3> won't be rendered (since "s" has no
title), but the tab will then simply have the name of the section
("foo"), which can't be translated (bad).

After this change, the tabbed map can be written like this:

	m = new form.Map('foobar', _('FooBar'));
	m.tabbed = true;
	s = m.section(form.TypedSection, 'foo', _('foo Settings'));
	s.hidetitle = true;

Which will give the Map tab the name "foo Settings", but won't add a
title for the TypedSection right under the tab.

Signed-off-by: David Härdeman <david@hardeman.nu>
---

diff --git a/modules/luci-base/htdocs/luci-static/resources/form.js b/modules/luci-base/htdocs/luci-static/resources/form.js
index 0ae54e7c83..c7308e2fba 100644
--- a/modules/luci-base/htdocs/luci-static/resources/form.js
+++ b/modules/luci-base/htdocs/luci-static/resources/form.js
@@ -2155,6 +2155,17 @@ const CBITypedSection = CBIAbstractSection.extend(/** @lends LuCI.form.TypedSect
 	 * @default false
 	 */
 
+	/**
+	 * If set to true, the title caption of the form section element which
+	 * is normally rendered before the start of the section content will
+	 * not be rendered in the UI. The default is false, meaning that the
+	 * title is rendered.
+	 *
+	 * @name LuCI.form.TypedSection.prototype#hidetitle
+	 * @type boolean
+	 * @default false
+	 */
+
 	/**
 	 * If set to `true`, mapped section instances are treated as anonymous
 	 * UCI sections, which means that section instance elements will be
@@ -2300,7 +2311,7 @@ const CBITypedSection = CBIAbstractSection.extend(/** @lends LuCI.form.TypedSect
 			'data-tab-title': (this.map.tabbed && !this.parentoption) ? this.title || this.sectiontype : null
 		});
 
-		if (this.title != null && this.title != '')
+		if (this.title != null && this.title != '' && !this.hidetitle)
 			sectionEl.appendChild(E('h3', {}, this.title));
 
 		if (this.description != null && this.description != '')
@@ -2530,7 +2541,7 @@ const CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection
 			'class': 'table cbi-section-table'
 		});
 
-		if (this.title != null && this.title != '')
+		if (this.title != null && this.title != '' && !this.hidetitle)
 			sectionEl.appendChild(E('h3', {}, this.title));
 
 		if (this.description != null && this.description != '')
@@ -3513,6 +3524,17 @@ const CBINamedSection = CBIAbstractSection.extend(/** @lends LuCI.form.NamedSect
 	 * @default false
 	 */
 
+	/**
+	 * If set to true, the title caption of the form section element which
+	 * is normally rendered before the start of the section content will
+	 * not be rendered in the UI. The default is false, meaning that the
+	 * title is rendered.
+	 *
+	 * @name LuCI.form.NamedSection.prototype#hidetitle
+	 * @type boolean
+	 * @default false
+	 */
+
 	/**
 	 * Override the UCI configuration name to read the section IDs from. By
 	 * default, the configuration name is inherited from the parent `Map`.
@@ -3568,7 +3590,7 @@ const CBINamedSection = CBIAbstractSection.extend(/** @lends LuCI.form.NamedSect
 			'data-tab-title': (this.map.tabbed && !this.parentoption) ? this.title || this.sectiontype : null
 		});
 
-		if (typeof(this.title) === 'string' && this.title !== '')
+		if (typeof(this.title) === 'string' && this.title !== '' && !this.hidetitle)
 			sectionEl.appendChild(E('h3', {}, this.title));
 
 		if (typeof(this.description) === 'string' && this.description !== '')